<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var my_li = $('.list li');
            var my_button = $('#button-1');
            var my_input = $('#text-1');
            var my_div = $('#div-1');

            my_li.click(function(){
                $(this).css({'background': 'red'});
                console.log($(this).index());
            });

            my_button.click(function(){
                console.log(my_input.val())
            });

            // 获取焦点
            my_input.focus(function(){
                $(this).css({'background': 'yellow'})
            });

            // 失去焦点
            my_input.blur(function(){
                $(this).css({'background':'green'})
            });

            // 鼠标进入
            my_div.mouseover(function(){
                $(this).css({'background': 'pink'})
            })

            // 鼠标离开
            my_div.mouseout(function(){
                $(this).css({'background': 'white'})
            })
        
        })
    </script>
</head>
<body>
    <div id="div-1">
        <ul class="list">
            <li>列表文字 -1 </li>
            <li>列表文字 -2 </li>
            <li>列表文字 -3 </li>
        </ul>

        <input type="text" id="text-1">
        <input type="button" value="点我一下" id="button-1">
    </div>
</body>
</html>